<template>
  <!--页面主内容区域开始-->
  <div class="main_content">

    <ul class="height20"></ul>
    <div class="w870 left">
      <div class="iask06">
        <dl class="iask06_1" v-for="(c1) in categoryList" :key="c1.pid">
          <dt>
            <router-link :to="{path:''}">{{ c1.departmentName }}</router-link>
          </dt>
          <dd>
            <span v-for="(c2) in c1.diseaseList" :key="c2.pid">
              <router-link style="white-space:nowrap" :to="{path:'/videoList',query:{disease:c2 }}"
                           class="around">{{ c2 }}</router-link>
            </span>
          </dd>
        </dl>
      </div>
      <div class="w615 right">
        <div class="iask07" id="switchBlocks">
          <span class="tabContent" style="display: none;">
            <ul class="catalog03">
              <li>
                <a href="#"><img
                    src="../../../public/picture/banner_feiai_disease.jpeg" alt="肺癌的早期症状有哪些？"></a>
                <span class="mengban"></span>
                <p> <a href="#" class="link05">肺癌的早期症状有哪些？</a></p>
              </li>
            </ul>
            <dl class="catalog01">
              <dt><ul><img class="questionImg" src="../../../public/picture/question.jpg" alt=""></ul>
                <a class="question_dis" href="#">肺癌的早期症状有哪些？</a>
              </dt>
              <dd><ul><img class="answerImg" src="../../../public/picture/answer.jpg" alt=""></ul>
                1、咳嗽：咳嗽是肺癌的早期症状之一。<br/>
                2、痰中带血：咳嗽时有血丝，甚至只是少量血丝。<br/>
                3、呼吸困难：当肿瘤逐渐增大时，将时不时压迫呼吸道和其他部位。<br/>
                4、肩膀疼：际它也可能是肺癌的其中一种症状。<br/>
                5、其他早期症状：胸闷、体重下降明显、声音沙哑等。
              </dd>
            </dl>
          </span>
          <span class="tabContent" style="display: inline;">
            <ul class="catalog03">
              <li>
                <a href="#"><img
                    src="../../../public/picture/banner_child_ganmao_disease.jpeg" alt=""></a>
                <span class="mengban"></span>
                <p><a href="#" class="link05">小儿感冒饮食注意什么？</a></p>
              </li>
            </ul>
            <dl class="catalog01">
              <dt><ul><img class="questionImg" src="../../../public/picture/question.jpg"></ul><a class="question_dis"
                                                                                                  href="#">小儿感冒饮食注意什么？</a></dt>
              <dd><ul><img class="answerImg" src="../../../public/picture/answer.jpg" alt=""></ul>
                1、小儿感冒后饮食需调整，首先提倡母乳喂养到4个月左右的时候，及时添加辅食。<br/>
                2、因母乳喂养可以让婴儿在6个月内少生病。所以，小婴儿感冒期间仍提倡母乳喂养，4个月后的婴儿应添加适量的辅食。<br/>
                3、此外，让患儿多喝水、多吃青菜，避免暴饮暴食，不要过分要求患儿的蛋白摄入。</dd>
            </dl>
		      </span>
          <span class="tabContent" style="display: none;">
            <ul class="catalog03">
              <li>
                <a href="#"><img
                    src="../../../public/picture/banner_hand_foot_disease.jpeg"></a>
                <span class="mengban"></span>
                <p><a href="#" class="link05">手足口病怎么护理？</a></p>
              </li>
            </ul>
            <dl class="catalog01">
              <dt><ul><img class="questionImg" src="../../../public/picture/question.jpg"></ul><a class="question_dis"
                                                                                                  href="#">手足口病怎么护理？</a></dt>
              <dd><ul><img class="answerImg" src="../../../public/picture/answer.jpg"></ul>1、首先要把患病的孩子隔离开，接触者要注意消毒还有患者之间避免交叉感染。<br/>
                            2、手足口病患者的护理以促进患者降温、皮疹消退为主，还需避免发生继发性的皮肤感染等。<br/>
                            3、使用生物抗菌肽制剂。抗菌肽主要的生物学作用就是抗菌活性。<br/>
                            4、一定要做好孩子的日常用品的消毒工作。<br/>
                            5、小儿手足口病一般具有季节性，预防手足口病我们需要知道这些常识，平时尽量不要带孩子去人多的地方，远离病毒传染源。
              </dd>
            </dl>
		      </span>
          <ul class="iask07_btn tabs">
            <router-link to="#" data-idx="0" class="">肺癌的早期症状有哪些？</router-link>
            <router-link to="#" data-idx="1" class="">小儿感冒饮食注意什么？</router-link>
            <router-link to="#" data-idx="2" class="">手足口病怎么护理？</router-link>
          </ul>
        </div>
        <ul class="iask08_head">近期最热问答</ul>
        <div class="iask08_con">
          <ul v-for="(hotQuestion) in hotQuestions" :key="hotQuestion.pid">
            <dl>
              <dt>{{ hotQuestion.when }}</dt>
              <dd>
                <router-link :to="{path:'/question',query:{mid:hotQuestion.mid }}" class="around">
                  {{ hotQuestion.content }}
                </router-link>
              </dd>
            </dl>
          </ul>
        </div>
      </div>
      <ul class="clearfloat"></ul>
    </div>
    <div class="iask10">
      <ul class="border04_head"><router-link to="#" class="link06"><span><img style="height: 120%"
                                                                      src="../../../public/picture/hot.jpg" alt=""></span>{{ entity1Questions.entity }}</router-link>
      </ul>
      <ul class="catalog03 catalog03b">
        <li>
          <a href="#">
            <img src="../../../public/index_assert/ask_byby_01.jpg" alt="">
          </a>
          <span></span>
          <p><a href="#" class="link05">如何计算排卵期</a></p>
        </li>
        <li>
          <a href="#">
            <img src="../../../public/index_assert/ask_byby_02.jpg" alt=""></a>
          <span></span>
          <p><a href="#" class="link05">多囊卵巢怎么治</a></p>
        </li>
      </ul>
      <ul v-for="(e1) in entity1Questions.questions" class="catalog02 iask02a">
        <li>
          <router-link :to="{path:'/question',query:{mid:e1.mid }}" class="around">{{ e1.content }}</router-link>
        </li>
      </ul>

      <ul class="border05_head"><a class="link06"><span></span>{{ entity2Questions.entity }}</a></ul>
      <ul class="catalog03 catalog03a iask03a">
        <li>
          <a href="#"><img
              src="../../../public/index_assert/ask_wky.jpg" alt=""></a>
          <span></span>
          <p><a href="#" class="link05">胃溃疡是怎么引起的？怎么治？</a></p>
        </li>
      </ul>
      <ul v-for="(e2) in entity2Questions.questions" class="catalog02 catalog02b">
        <li>
          <router-link :to="{path:'/question',query:{mid:e2.mid }}" class="around">{{ e2.content }}</router-link>
        </li>
      </ul>
    </div>
  </div>
  <!--页面主内容区域 结束-->
</template>

<script>

import '../../../public/index_assert/common.css'
import '../../../public/index_assert/ask.css'
import {Loading} from "element-ui";
import {reqUserInfo} from "@/api";
import {setUserInfo} from "@/utils/userInfo";

export default {
  data() {
    return {
      categoryList: [],
      hotQuestions: [],
      entity1Questions: [],
      entity2Questions: []
    }
  },
  name: "Index",
  created() {
    this.entityQuestions = new Map()
  },
  mounted() {
    let loading = Loading.service({fullscreen: true});
    this.jqueryChange()
    this.getCategoryList()
    this.getHotQuestions(10, 3)
    this.getEntity1Questions('不孕不育', 6)
    this.getEntity2Questions('胃溃疡', 6)
    loading.close()

  },

  methods: {
    getEntity1Questions(entity, countQuestions) {
      this.$store.dispatch('getEntityQuestions', {entity, countQuestions}).then((res) => {
        this.entity1Questions = res.entityQuestions;
      })
    },
    getEntity2Questions(entity, countQuestions) {
      this.$store.dispatch('getEntityQuestions', {entity, countQuestions}).then((res) => {
        this.entity2Questions = res.entityQuestions;
      })
    },
    getHotQuestions(countEntity, countQuestion) {
      this.$store.dispatch('getHotQuestions', {countEntity, countQuestion}).then((res) => {
        this.hotQuestions = res.hotQuestions

      })
    },
    jqueryChange() {
      // eslint-disable-next-line no-undef
      $(function () {
        // eslint-disable-next-line no-undef
        $('.tabs .tab').mouseenter(function () {
          // eslint-disable-next-line no-undef
          $(this).siblings().removeClass('curr');
          // eslint-disable-next-line no-undef
          var seq = $(this).addClass('curr').attr('data-seq');
          // eslint-disable-next-line no-undef
          $(this).parents(".border02_tag").siblings('[data-seq]').hide().filter("[data-seq=" + seq + "]").show();
        });
      });
      // eslint-disable-next-line no-undef
      var switchBlock = $('#switchBlocks');
      switchBlock.find('.tabs a').each(function (index) {
        var idx = index;
        // eslint-disable-next-line no-undef
        $(this).mouseenter(function () {
          // eslint-disable-next-line no-undef
          if ($(this).hasClass('curr')) return;
          // eslint-disable-next-line no-undef
          $(this).addClass('curr').siblings().removeClass('curr');
          switchBlock.find(".tabContent").hide().eq(idx).fadeIn();
        });
      });
    },
    getCategoryList() {
      this.$store.dispatch('categoryList').then((res) => {
        this.categoryList = res.departments
      })
    },

  }
}
</script>

<style scoped>
.tw_rb_off textarea, .tw_rb_off input {
  display: none;
}

.catalog01 dd {
  height: 138px;
  overflow: hidden;
  text-overflow: ellipsis;
  /*white-space: nowrap; */
}

.unFreeAskLink {
  display: block;
  width: 43px;
  height: 149px;
  background: darkgray;
}

.iask07_btn {
  top: 190px;
  height: 54px;
}

.question_dis {
  font-size: 20px;
}

a:hover {
  color: #419dbf;
  text-decoration: none;
}

.iask07_btn a.curr {
  background: #419dbf;
  text-decoration: none;
  color: #ffffff;
}

.link06 {
  font-size: 20px;
  /*padding-bottom: 0 0 10px 0;*/
}

.questionImg {
  height: 127%;
  margin-left: -2px;
  margin-top: -2px;
}

.answerImg {
  height: 120%;
}

.border04_head {
  margin-top: -10px;
}

.iask02a li {
  height: 40px;
}
.iask08_con dl {
  clear: both;
  height: 48px;
  overflow: hidden;
  line-height: 60px;
  margin-left: 20px;
}
.catalog03 li span, .mengban {
  background: #9a9a9a;
}
.main_content{
 margin-bottom: 1750px;
}


</style>
